<script setup lang="ts">
import { ElMenu, ElScrollbar } from 'element-plus'
import RecurItem from '@/components/recur-item.vue'
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, RouterView } from 'vue-router'

import type { MenuData } from '@/types/menu'
import menu from '@/assets/menu.json'

const menuData: MenuData[] = menu

const route = useRoute()
const activeIndex = computed(() => route.path)
const isCollapse = ref(false)
const menuMode = ref<'horizontal' | 'vertical'>('horizontal')

const handleResize = () => {
  isCollapse.value = window.innerWidth <= 1080 && window.innerWidth >= 768
  menuMode.value = window.innerWidth <= 768 ? 'horizontal' : 'vertical'
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  handleResize()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<template>
  <div class="frame">
    <header class="sidebar">
      <el-scrollbar>
        <el-menu
          :default-active="activeIndex"
          router
          :collapse="isCollapse"
          :mode="menuMode"
          :ellipsis="false"
        >
          <recur-item
            v-for="item in menuData"
            :key="item.id"
            :title="item.title"
            :icon="item.icon"
            :index="item.index"
            :subs="item.subs"
          />
        </el-menu>
      </el-scrollbar>
    </header>

    <el-main class="main">
      <router-view />
    </el-main>
  </div>
</template>

<style scoped>
.frame {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: 200px max-content;
}

@media screen and (max-width: 1080px) {
  .frame {
    grid-template-columns: 70px max-content;
  }
}

@media screen and (max-width: 768px) {
  .frame {
    grid-template-columns: none;
    grid-template-rows: 60px max-content;
  }
  .sidebar {
    width: 100vw;
    background-color: #fff;
  }
}
</style>
